import React, { Component } from "react";
import { connect } from "dva";
import {
  Input,
  Button,
  DatePicker,
  Table,
  Modal,
  message,
  Tooltip,
  Select,
  Cascader
} from "antd";
import moment from "moment";
import * as ajax from "../../../services/api";
import PTable from "../../../components/Pro/PTable";
import "./less/report.less";
import DistrictDetails from "./DistrictDetails";
import AddDistrictDetails from "./AddDistrictDetalis";
const Option = Select.Option;

const confirm = Modal.confirm;
const { RangePicker } = DatePicker;
const dateFormat = "YYYY-MM-DD";

const text = (
  <div className="prompt-text">
    <h2 style={{ color: "#fff", fontSize: "14px", lineHeight: 1.5, margin: 0 }}>
      跨区经营情况用于记录公司跨区经营活动情况。
    </h2>
    <p style={{ fontSize: "12px", margin: 0, lineHeight: 1.4 }}>
      1、如果线下已做备案请【新增记录】。
    </p>
    <p style={{ fontSize: "12px", margin: 0, lineHeight: 1.4 }}>
      2、如果未备案可进入【在线备案】报备跨区经营信息。
    </p>
  </div>
);

/** 跨区经营 */
export default class DistrictBasic extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      pageParm: {
        open: true,
        open2: false,
        // comId: 1,
        startSerachDate: "",
        endSerachDate: "",
        cityContent: "",
        provinceContent: "",
        areaContent: "",
        securityRangeContent: "",
        serachContent: "",
        pageSize: "10",
        pageNumber: "1"
      },
      forceUpdate: false,
      crossManageId: "00",
      securityRange: [], //安保范围
      areas: [], //地区
      input_val: "", //输入框的值
      range: "", //安保选中值
      startTime: null, //开始时间
      endTime: null, //结束时间
      arera_Val: [], //区域选中值
      start: false,
      end: false
    };
  }

  componentDidMount() {
    this.securityRangeList();
    this.getDistrict();
    console.log("thisthisthis", this.props);
  }

  securityRangeList = () => {
    ajax.getDictInformation({ codeTypes: "securityRange" }).then(data => {
      if (data.data) {
        this.setState({
          securityRange: data.data.securityRange
        });
      }
    });
  };

  //省市区
  getDistrict = () => {
    ajax.getDistrictData().then(data => {
      console.log("省市区data:", data);
      let areas = data.data.map(val => {
        return {
          value: val.regionId,
          label: val.regionName,
          children: val.childs.map(valChild => {
            return {
              value: valChild.regionId,
              label: valChild.regionName,
              children: valChild.childs.map(valChildChild => {
                return {
                  value: valChildChild.regionId,
                  label: valChildChild.regionName
                };
              })
            };
          })
        };
      });
      //console.log('areas:'+JSON.stringify(areas));
      this.setState({
        areas: areas
      });
    });
  };

  //table 数据变化
  dateTableChange = data => {
    console.log("data", data);
  };

  //输入框的书写
  inputTracknameChange = e => {
    this.setState({
      input_val: e.target.value.trim()
    });
  };

  //时间选择
  onChangeTime = (date, dateString) => {
    if (dateString[0] !== "") {
      this.setState({
        start: true,
        end: true,
        startTime: dateString[0],
        endTime: dateString[1]
      });
    } else {
      this.setState({
        start: false,
        end: false,
        startTime: "",
        endTime: ""
      });
    }
  };

  //点击搜索
  search = () => {
    let pageParm = { ...this.state.pageParm };
    if (this.state.start !== false) {
      let startSerachDate = this.state.startTime;
      pageParm.startSerachDate = startSerachDate;
    } else {
      pageParm.startSerachDate = "";
    }
    if (this.state.end !== false) {
      let endSerachDate = this.state.endTime;
      pageParm.endSerachDate = endSerachDate;
    } else {
      pageParm.endSerachDate = "";
    }
    if (this.state.arera_Val.length !== 0) {
      let provinceContent = this.state.arera_Val[0];
      let cityContent = this.state.arera_Val[1];
      let areaContent = this.state.arera_Val[2];
      pageParm.cityContent = cityContent;
      pageParm.provinceContent = provinceContent;
      pageParm.areaContent = areaContent;
    } else {
      pageParm.cityContent = "";
      pageParm.provinceContent = "";
      pageParm.areaContent = "";
    }
    let securityRangeContent = this.state.range;
    pageParm.securityRangeContent = securityRangeContent;
    let serachContent = this.state.input_val;
    pageParm.serachContent = serachContent;
    this.setState({ pageParm });
  };

  //重置
  resetting = () => {
    this.setState({
      input_val: "", //输入框的值
      range: "", //安保选中值
      arera_Val: [], //区域选中值
      start: false,
      end: false,
      pageParm: {
        // comId: 1,
        startSerachDate: "",
        endSerachDate: "",
        cityContent: "",
        provinceContent: "",
        areaContent: "",
        securityRangeContent: "",
        serachContent: "",
        pageSize: "10",
        pageNumber: "1"
      },
      forceUpdate: true
    });
  };

  // 表格渲染
  renderOrderList = () => {
    const columns = [
      {
        title: "跨区经营市县",
        key: "we",
        render: (text, record) => (
          <div>
            <p>
              <span>{record.provinceDescription}</span>
              {record.cityDescription ? (
                <span>-{record.cityDescription}</span>
              ) : (
                ""
              )}
              {record.areaDescription ? (
                <span>-{record.areaDescription}</span>
              ) : (
                ""
              )}
            </p>
          </div>
        )
      },
      {
        title: "负责人",
        dataIndex: "responsPer",
        key: "responsPer"
      },
      {
        title: "联系方式",
        dataIndex: "responsPerPhone",
        key: "responsPerPhone"
      },
      {
        title: "经营时间",
        dataIndex: "startDate",
        key: "startDate"
      },
      {
        title: "备案机关",
        dataIndex: "recordPoliceName",
        key: "recordPoliceName"
      },
      {
        title: "安保类型",
        render: (text, record) => (
          <p style={{ margin: 0, padding: 0 }}>
            <span>
              {record.securityRangeContentArrays[0] != null
                ? record.securityRangeContentArrays[0]
                : ""}
            </span>
            <span style={{ marginLeft: "5px" }}>
              {record.securityRangeContentArrays[1] != null
                ? record.securityRangeContentArrays[1]
                : ""}
            </span>
            <span style={{ marginLeft: "5px" }}>
              {record.securityRangeContentArrays[2] != null
                ? record.securityRangeContentArrays[2]
                : ""}
            </span>
            <span style={{ marginLeft: "5px" }}>
              {record.securityRangeContentArrays[3] != null ? "..." : ""}
            </span>
          </p>
        )
      },
      {
        title: "操作",
        key: "yu",
        render: (text, record) => (
          <div>
            <span
              style={{
                color: "#108EE9",
                cursor: "pointer",
                marginRight: "20px"
              }}
              onClick={() => {
                // this.props.props.history.push(`/enterprise/reported/districtdetails/${record.crossManageId}`);
                this.setState({
                  crossManageId: record.crossManageId,
                  open: true
                });
              }}
            >
              修改
            </span>
            <span
              style={{ color: "#108EE9", cursor: "pointer" }}
              onClick={this.showDeleteConfirm.bind(this, record.crossManageId)}
            >
              删除
            </span>
          </div>
        )
      }
    ];

    return (
      <PTable
        columns={columns}
        url="comStockCrossManageList"
        pageParm={this.state.pageParm}
        // dateChange={this.dateTableChange}
        forceUpdate={this.state.forceUpdate}
        showTotal
      />
    );
  };

  //删除
  showDeleteConfirm = orderID => {
    console.log(orderID);
    let _this = this;
    confirm({
      title: "是否删除所选信息，删除后无法找回。是否确认删除？",
      okText: "确认",
      cancelText: "取消",
      onOk() {
        _this.orderDelete(orderID);
      },
      onCancel() {
        console.log("Cancel");
      }
    });
  };

  // 订单删除
  orderDelete = orderID => {
    ajax
      .comStockDeleteCrossManageById({ crossManageId: orderID })
      .then(data => {
        this.setState({ forceUpdate: true });
      });
  };

  //安保类型下拉选择值
  renderSecurityRange = () => {
    return this.state.securityRange.map((val, key) => {
      return (
        <Option key={key} value={val.codeValue + ""}>
          {val.label}
        </Option>
      );
    });
  };

  //安保类型选中值
  handleChangeAn = value => {
    console.log(`selected ${value}`);
    this.setState({
      range: value
    });
  };

  //区域选择值
  onChangeDistrict = value => {
    console.log("区域选择值", value);
    this.setState({
      arera_Val: value
    });
  };
  // 调用方法
  onRef = ref => {
    this.child = ref;
  };
  resetFrom = () => {
    this.child.resetFrom();
  };

  callback = () => {
    this.setState({ open: false, open2: false });
    // this.ajaxInsPage();
    this.setState({ forceUpdate: true });
  };

  render() {
    let display = { display: "block" };
    if (this.state.visible) {
      display = { display: "none" };
    }

    return (
      <div className="report-mess">
        <div style={display}>
          <div className="form">
            <label>
              关键字：
              <Input
                style={{ width: 224, marginBottom: "16px" }}
                placeholder="请输入负责人/手机号/备案机关"
                onChange={this.inputTracknameChange}
                maxLength="20"
                value={this.state.input_val}
              />
            </label>
            <label style={{ marginLeft: 16, marginBottom: "16px" }}>
              安保类型：
              <Select
                value={this.state.range}
                style={{ width: 214 }}
                onChange={this.handleChangeAn}
              >
                <Option value="">请选择</Option>
                {this.renderSecurityRange()}
              </Select>
            </label>
            <label style={{ marginLeft: 16, marginBottom: "16px" }}>
              经营开始时间：
              <RangePicker
                format={dateFormat}
                onChange={this.onChangeTime}
                style={{ width: 230 }}
                value={[
                  this.state.start
                    ? moment(this.state.startTime, dateFormat)
                    : null,
                  this.state.end ? moment(this.state.endTime, dateFormat) : null
                ]}
              />
            </label>
            <label style={{ marginLeft: 16, marginBottom: "16px" }}>
              选择区域：
              <Cascader
                options={this.state.areas}
                placeholder="请选择"
                style={{ width: 250 }}
                onChange={this.onChangeDistrict}
                value={this.state.arera_Val}
              />
            </label>
            <Button
              style={{ marginLeft: 16, marginBottom: "16px" }}
              type="primary"
              onClick={this.search}
            >
              搜索
            </Button>
            <Button
              style={{ marginLeft: 16, marginBottom: "16px" }}
              onClick={this.resetting}
            >
              重置
            </Button>
          </div>
          <div className="district-butt" style={{ marginTop: 0 }}>
            <Tooltip placement="bottomLeft" title={text}>
              <Button
                type="primary"
                onClick={() => {
                  this.resetFrom();
                  // this.props.props.history.push(`/enterprise/reported/districtdetails/${'00'}`);
                  this.setState({
                    crossManageId: "00",
                    open2: true
                  });
                }}
              >
                新增记录
              </Button>
            </Tooltip>
            <Tooltip placement="bottomLeft" title={text}>
              <Button type="danger" ghost>
                在线备案
              </Button>
            </Tooltip>
          </div>
          {this.renderOrderList()}
        </div>
        <DistrictDetails
          crossManageId={this.state.crossManageId}
          visible={this.state.open}
          close={this.callback}
          onChange={open => {
            this.setState({ open });
          }}
        />
        <AddDistrictDetails
          crossManageId={this.state.crossManageId}
          visible={this.state.open2}
          onRef={this.onRef}
          close={this.callback}
          onChange={open2 => {
            this.setState({ open2 });
          }}
        />
      </div>
    );
  }
}
